<template>
  <div v-if="question" class="section" :class="{ 'hidden-section': question.isRef }">
    <el-row>
      <div class="topic">
        <label>{{question.topic}}<span v-if="question.isRef" style="color:orange">(关联)</span></label>
        <div class="section-control">
          <view-section-control :question="question"
                                v-on:move="move"
                                v-on:update="clearFlush"
                                v-on:remove="remove"
                                v-on:edit="edit"></view-section-control>
        </div>
      </div>
    </el-row>
    <div v-if="question.type === 'paragraph'"></div>
    <view-i-text v-else-if="question.type === 'input'" :question="question"></view-i-text>
    <view-i-radio v-else-if="question.type === 'radio'" :question="question"></view-i-radio>
    <view-i-checkbox v-else-if="question.type === 'checkbox'" :question="question"></view-i-checkbox>
    <view-i-datetime v-else-if="question.type === 'datetime'" :question="question"></view-i-datetime>
    <view-i-switch v-else-if="question.type === 'switch'" :question="question"></view-i-switch>
    <view-i-image v-else-if="question.type === 'image'" :question="question"></view-i-image>
    <view-i-table v-else-if="question.type === 'table'" :question="question"></view-i-table>
    <div v-else>啥呀-{{question.topic}}</div>
  </div>
</template>

<script>
  import ViewIText from "./iText";
  import ViewICheckbox from "./iCheckbox";
  import ViewSectionControl from "./sectionControl";
  import ViewIRadio from "./iRadio";
  import ViewIDatetime from "./iDatetime";
  import ViewISwitch from "./iSwitch";
  import ViewIImage from "./iImage";
  import ViewITable from "./iTable";


  export default {
    components: {
      ViewITable,
      ViewIImage,
      ViewISwitch,
      ViewIDatetime,
      ViewIRadio,
      ViewICheckbox,
      ViewIText,
      ViewSectionControl},
    name: "qa-view-controller",
    props:['question'],
    data() {
      return {

      }
    },
    created(){
    },
    methods:{
      clearFlush(){
        this.$emit('update');
      },
      edit(value){
        this.$emit('edit',value);
      },
      move(payload){
        this.$emit('move',payload);
      },
      remove(question){
        this.$emit('remove',question);
      }
    }
  }
</script>

<style lang="scss">
  .section{
    margin:10px 5px;
    border:1px solid #cccccc;
    .topic{
      background-color: #efefef;
      height: 30px;
      line-height: 24px;
      padding:4px 6px;
      position:relative;
      label{
        box-sizing: border-box;
        display: inline-block;
        min-width: 150px;
        width: calc(100% - 100px);
      }
      .section-control{
        top: 0;
        right: 5px;
        position: absolute;
      }
    }
    .section-input{
      padding: 4px 6px;
    }
  }
  .hidden-section{
    border:1px dashed #000000;
    .topic{
      border-bottom:1px dashed #000000;
      color:#8a8a8a;
    }
  }
</style>
